<template>
  <div>
    <el-dialog
            v-model="dialogVisible"
            :title="'工作周报'"
            width="40%"
            @close="closeDialog"
            class="dialogStyle"
    >
        <el-form
                label-width="120"
                ref="formRef"
                :rules="rules"
                :model="state.formInline"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label="名称" prop="title">
                        <el-input v-model="state.formInline.title" placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="时间范围" prop="startTime">
                        <el-date-picker
                                v-model="state.formInline.startTime"
                                type="daterange"
                                class="search_time"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item
                            label="截止填写时间"
                            v-if="type == '建设部'"
                            prop="deadline"
                    >
                        <el-date-picker
                                v-model="state.formInline.deadline"
                                type="date"
                                value-format="YYYY-MM-DD"
                                placeholder="选择预计开始日期"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose" class="button_cancel2">取消</el-button>
        <el-button @click="submitWeekHandler" class="button_view"> 确定 </el-button>
      </span>
        </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
    ElDialog,
    ElForm,
    ElFormItem,
    ElRow,
    ElCol,
    ElMessage
} from 'element-plus'
import { weeklyApi } from '@/api/project'
const props = defineProps({
    data: {
        type: Object,
        default: {
            type: '公司',
            form: {}
        }
    }
})

const type = ref('工作')

const state = reactive({
    isAdd: true,
    formInline: {
        title: '',
        startTime: [],
        deadline: ''
    }
})
const rules = {
    title: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    startTime: [{ required: true, message: '时间范围不能为空', trigger: 'blur' }],
    deadline: [{ required: true, message: '截止日期不能为空', trigger: 'blur' }]
}


const formRef = ref(null)
//提交工作周报
const submitWeekHandler = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            let obj = {
                title: state.formInline.title,
                startTime: state.formInline.startTime[0],
                endTime: state.formInline.startTime[1],
                deadline: state.formInline.deadline + ' 23:59:59',
                type:2,
            }
            if (!state.isAdd) {//编辑
                obj.departmentWeeklyId=state.formInline.departmentWeeklyId
                weeklyApi.updateWeekly(obj).then((res) => {
                    if (res.code === '200') {
                        ElMessage.success('提交成功')
                        dialogVisible.value = false
                    }
                })
            }

            //新增
            if (state.isAdd) {
                weeklyApi.createWeekly(obj).then((res) => {
                    if (res.code === '200') {
                        ElMessage.success('提交成功')
                        dialogVisible.value = false
                    }
                })
            }
        }
    })
}
const dialogVisible = ref(false)
const emits = defineEmits(['refreshList'])
const handleClose = () => {
    dialogVisible.value = false
}

//关闭弹框
const closeDialog = () => {
    for (const key in state.formInline) {
        if (key == 'startTime') {
            state.formInline[key] = []
        } else {
            state.formInline[key] = ''
        }
    }
    emits('refreshList')
}
const open = (params, data) => {
    dialogVisible.value = true

    state.isAdd = params.isAdd
    type.value = params.type

    if (data) {
        state.formInline.title = data.title
        state.formInline.startTime = [data.startTime, data.endTime]
        state.formInline.deadline = data.deadline
        state.formInline.departmentWeeklyId = data.departmentWeeklyId
    }
    console.log('son', dialogVisible.value)
}

defineExpose({
    open
})
</script>
<style lang="scss" scoped>
// .el-form-item,
// .el-select {
//   width: 100%;
// }
.el-form-item {
  width: 100% !important;
  .el-form-item__content {
    width: 100%;
    :deep(.el-date-editor.el-input) {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
